<script lang="ts" setup>
import Top from './components/Top.vue'
import Bottom from './components/Bottom.vue'
import Links from './components/Links.vue'
import Catalog from './components/Catalog.vue'
import Point from './components/Point.vue'
import Material from './components/Material.vue'

const { videoInfo, init } = $(useVideo())
// 选中的tab
const activeLink = $ref(0)
// 获取当前课程id
onLoad((query) => {
  const videoId = query?.id
  init(Number(videoId))
})
// 截取海报介绍地址
const summary = computed(() => {
  const summary = videoInfo?.summary
    .replace('<img src="', '')
    .replace('" style="width:100%" />', '')
    .replace('" style="width:100%"/>', '')
  return summary ?? ''
})


onPageScroll(() => {
  uni.$emit('canScrollDetails', true)
})

watch(
  () => activeLink,
  () => uni.$emit('canScrollDetails', false)
)
</script>

<template>
  <view h-full flex-1>
    <!-- 顶部导航栏 -->
    <Top />
    <!-- tab选项 -->
    <view px-3 flex="~ col">
      <Links v-model:activeIdx="activeLink" flex-shrink-0 :links="['课程介绍', '课程目录', '用户评价', '课程资料']" :base="4" />
      <view flex-1>
        <view center v-show="activeLink === 0">
          <image :src="summary" mode="widthFix" />
        </view>
        <view v-show="activeLink === 1">
          <!-- 课程目录 -->
          <Catalog />
        </view>
        <view v-show="activeLink === 2">
          <!-- 用户评价 -->
          <Point />
        </view>
        <view v-show="activeLink === 3">
          <!-- 课程资料 -->
          <Material />
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <Bottom />
  </view>
</template>

<style lang="scss" scoped></style>